<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import TopNav from '../../components/TopNav.vue';
import QRCodeGenerator from '../../components/QRCodeGenerator.vue';
import { useStore } from '../../store/useStore';
import { showToast } from 'vant';
const store = useStore()

const text1 = ref('http://localhost:8080/pron')
const avatarSrc = ref(store.info.avatar);
const show = ref(false);
const show1 = ref(false)
const flag = ref(false)
const onDelete = () => showToast('删除');
const value = ref('');
//设置开启保存收款码弹窗
const showPopup = () => {
    show.value = true;
};
//设置关闭保存收款码弹窗
const btn = () => {
    show.value = false
}
//设置金额点击事件
const Setup = () => {
    show1.value = true
    flag.value = true
}
const bLur = () => {
    show1.value = false
    flag.value = false
    value.value = ''
}
</script>

<template>
    <div class="top">
        <TopNav title="二维码收款" style="color: aliceblue;width: 95%;margin: 0 auto;"></TopNav>
        <div class="top1">
            <div class="top11"><span>{{ store.info.nickname }}</span></div>
            <QRCodeGenerator :avatarSrc :text1></QRCodeGenerator>
            <div class="top22">
                <a @click="Setup">设置金额</a>
                <a @click="showPopup">保存收款码</a>
                <a>更多设置</a>
            </div>
            <div class="top33">
                <p>收账小账本</p>
                <p><van-icon name="arrow" /></p>
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" round :style="{ height: '40%', background: '#303030' }">
            <div class="popup">
                <div>
                    <van-icon name="passed" color=" rgb(50, 255, 111)" size="50" />
                </div>
                <p style="color:#fff;margin-top: 15px;font-size: 15px;">已保存到系统相册</p>
                <p style="color:#fff;margin-top: 15px;font-size: 15px;">收款码仅限本人使用,请勿向他人出租收款<br />码,否则可能被他人用于非法活动</p>
                <button @click="btn">我知道了</button>
            </div>
        </van-popup>
        <van-popup v-model:show="flag" position="right" :style="{ width: '100%', height: '100%' }">
            <TopNav title="设置金额"></TopNav>
            <div class="popup1">
                <div class="popup11">
                    <p>收款金额</p>
                    <p style="display: flex;border-bottom: 1px solid #ccc;"><span style="font-size: 30px;">￥</span>
                        <van-field v-model="value" readonly clickable @touchstart.stop="show1 = true" size="20px" />
                    </p>
                </div>
                <p style="font-size: 15px;width: 90%;margin: 0 auto;padding-top: 10px;color:aquamarine">添加收钱备注</p>
                <van-number-keyboard :show="show1" theme="custom" close-button-text="完成" v-model="value" @blur="bLur"
                    @delete="onDelete" />
            </div>
        </van-popup>
    </div>
</template>

<style scoped>
.top {
    width: 100%;
    height: 100%;
    background-color: rgb(237, 182, 1);
}
.top1 {
    width: 95%;
    background-color: white;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
    padding-bottom: 10px;
}

.top11 {
    padding-top: 50px;
    padding-bottom: 20px;
}

.top22 {
    width: 250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.top22 a {
    font-size: 13px;
    padding-top: 10px;
    color: rgb(96, 106, 129);
}

.top33 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-top: 50px;
}

.popup {
    width: 100%;
    text-align: center;
    margin-top: 40px;
}

.popup button {
    width: 150px;
    height: 30px;
    margin-top: 10px;
    border-radius: 5px;
    border: none;
    background-color: rgb(15, 141, 32);
    color: #fff;
}

.popup1 {
    width: 100%;
}

.popup11 {
    width: 90%;
    margin: 0 auto;
}

.van-key--blue {

    background: rgb(1, 76, 37);
}

.van-key--large {
    height: 100px;
}

.van-key__wrapper {
    background: rgb(1, 76, 37);
}
</style>
